<style lang="less">
    .modal-box img{
        width: 600px;
    }
</style>

<template>
    <Card>
        <p slot="title">
            <Breadcrumb>
                <BreadcrumbItem to="/dashboard/index"><Icon type="ios-home-outline"></Icon> 首页</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-list"></Icon> 奖励</BreadcrumbItem>
                <BreadcrumbItem to="/user/list"><Icon type="ios-copy-outline"></Icon> 收款银行卡</BreadcrumbItem>
            </Breadcrumb>
        </p>
        <Form class="step-form" ref="searchForm" :model="searchForm" :rules="searchFormRules">
            <Row>
                <!--<Col span="4">-->
                    <!--<FormItem label="银行类型：" prop="nick_name">-->
                        <!--<Select :disabled="hasSubmit" v-model="searchForm.type">-->
                            <!--<Option value="1">直营奖励</Option>-->
                            <!--<Option value="2">网店奖励</Option>-->
                            <!--<Option value="3">实体店奖励</Option>-->
                        <!--</Select>-->
                    <!--</FormItem>-->
                <!--</Col>-->
                <!--<Col span="18">-->
                    <FormItem>
                        <!--<Button type="primary" :disabled="hasSubmit" @click="handleSubmit('searchForm')" icon="search">查询</Button>-->
                        <!--<Button type="ghost" @click="handleReset('searchForm')" style="margin-left: 8px">重置</Button>-->
                        <Button type="success" @click="showAddModal()">添加银行卡</Button>
                    </FormItem>
                <!--</Col>-->
            </Row>
        </Form>
        <Row>
            <Col span="8" style="margin-top: 1rem;" v-for="item in list">
                <Card style="width:350px;background-color: #f3f3f3">
                    <p slot="title">
                        <Icon type="ios-film-outline"></Icon>
                        {{item.bank_name}}
                    </p>
                    <a href="#" slot="extra">
                        <Poptip
                                confirm
                                title="确定要删除这张银行卡吗？"
                                @on-ok="deleteBank(item.id)"
                        >
                            <Button>删除</Button>
                        </Poptip>
                    </a>
                    <ul>
                        <li>开户名：{{item.account_name}}</li>
                        <li>开户名：{{item.bank_no}}</li>
                        <li>银行地址：{{item.bank_address}}</li>
                        <li>支行地址：{{item.bank_branch_name}}</li>
                    </ul>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalEdit" width="660">
            <p slot="header" style="text-align:center">
                <Icon type="information-circled"></Icon>
                <span>添加银行</span>
            </p>
            <div style="text-align:center">
                <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
                    <FormItem label="银行列表：" prop="bank_id" style="width: 50%">
                        <Select v-model="formCustom.bank_id">
                            <Option v-for="item in bank_id_list" :value="item.bank_id" :key="item.bank_id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="开户名" prop="account_name">
                        <Input type="text" v-model="formCustom.account_name"></Input>
                    </FormItem>
                    <FormItem label="卡号" prop="bank_no">
                        <Input type="text" v-model="formCustom.bank_no"></Input>
                    </FormItem>
                    <FormItem label="银行地址" prop="bank_address">
                        <Input type="textarea" :rows="rows" v-model="formCustom.bank_address"></Input>
                    </FormItem>
                    <FormItem label="支行名称" prop="bank_branch_name">
                        <Input type="text" v-model="formCustom.bank_branch_name"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formCustom')">确认添加</Button>
                        <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重新填写</Button>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer" style="text-align: center;">
                <!--<Button type="success" size="large" long :loading="modal_loading" @click="savepwd">修改</Button>-->
            </div>
        </Modal>
    </Card>
</template>
<script>
    import Cookies from 'js-cookie';
    import Util from '../../libs/util';
    import moment from 'moment';

    export default {
        data () {
            return {
                columns: [
                    {
                        title: '购物会员',
                        key: 'nick_name'
                    },
                    {
                        title: '订单编号',
                        key: 'order_no'
                    },
                    {
                        title: '奖励类型',
                        key: 'type_show'
                    },
                    {
                        title: '下单时会员身份',
                        key: 'user_type_text'
                    },
                    {
                        title: '订单金额',
                        key: 'money'
                    },
                    {
                        title: '订单总积分',
                        key: 'point_base'
                    },
                    {
                        title: '提成比例',
                        key: 'ratio_show'
                    },
                    {
                        title: '提成积分',
                        key: 'point'
                    },
                    {
                        title: '奖励说明',
                        key: 'description'
                    },
                    {
                        title: '自身提成比例',
                        key: 'self_ratio_show'
                    },
                    {
                        title: '贡献会员提成比例',
                        key: 'o_ratio_show'
                    },
                    {
                        title: '贡献会员',
                        key: 'o_user_nick_name'
                    },
                    {
                        title: '订单完成时间',
                        key: 'create_time',
                        render: (h, params) => {
                            return h('div', Util.formatDate(params.row.create_time));
                        }
                    }
                ],
                month: '',
                data: '',
                admin_type: Cookies.get('admin_type'),
                hasSubmit: false,
                searchForm: {
                    month_date: '',
                    type: ''
                },
                searchFormRules: {
                },
                current: this.$route.params.page ? this.$route.params.page : 1,
                pageSize: 12,
                total: 0,
                list: [],

                rows: 2,
                bank_id_list: [],
                modalEdit: false,
                modal_loading: false,
                formCustom: {
                    bank_id: '',
                    account_name: '',
                    bank_no: '',
                    bank_address: '',
                    bank_branch_name: ''
                },
                ruleCustom: {
                    bank_id: [
                        {type: 'number', required: true, message: '必须选择一个银行', trigger: 'blur'}
                    ],
                    account_name: [
                        { required: true, message: '必须输入开户名', trigger: 'blur' }
                    ],
                    bank_no: [
                        { required: true, message: '必须输入银行卡号', trigger: 'blur' },
                        { length: 19, message: '必须输入银行卡号', trigger: 'blur' }
                    ],
                    bank_address: [
                        { required: true, message: '必须输入银行地址', trigger: 'blur' }
                    ],
                    bank_branch_name: [
                        { required: true, message: '必须输入支行地址', trigger: 'blur' }
                    ]
                }
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                const $params = {page: this.current};
                this.getList($params);
                this.getBankIdList();
            });
        },
        methods: {
            getBankIdList: function () {
                let _this = this;
                Util.ajax.post(`/adminapi/bank/bankidlist`, {}).then(response => {
                    if (response.data.code==0) {
                        _this.bank_id_list = response.data.data;
                    }
                }).catch(function (error) {
                    _this.$Message.error('网络请求失败');
                });
            },
            getList: function (params) {
                let _this = this;
                let p = {
                    ...params
                }
                Util.ajax.post(`/adminapi/bank/list`, p).then(response => {
                    if(response.data.code==0) {
                        _this.list = response.data.data.list;
                    }
                }).catch( function (error) {
                    _this.disabled = false;
                    _this.$Message.error('网络请求失败');
                });
            },
            handleSubmit (name) {
                let _this = this;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (name == 'formCustom') {
                            if(this.formCustom.bank_no.length != 19){
                                _this.$Message.error('请输入正确的19位银行卡');
                                return;
                            }
                            Util.ajax.post(`/adminapi/bank/add`, this.formCustom).then(response => {
                                if(response.data.code==0) {
                                    _this.$Message.success('添加成功');
                                    this.getList();
                                    this.modalEdit = false;
                                } else {
                                    this.$Message.error(response.data.msg);
                                }
                            }).catch( function (error) {
                                _this.$Message.error('网络请求失败');
                            });
                        } else {
                            let params = {
                                ...this.searchForm,
                                page: 1,
                                pageSize: this.pageSize
                            };
                            params.month_date = params.month_date? moment(params.month_date).format('X'): '';
                            this.getList(params);
                        }
                    } else {
                        this.searchBrnLoading = false;
                    };
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
                this.searchForm = {
                    month_date: '',
                    type: ''
                };
                this.hasSubmit = false;
                this.getList();
            },
            showAddModal () {
                this.modalEdit = true;
                this.formCustom = {
                    bank_id: '',
                    account_name: '',
                    bank_no: '',
                    bank_address: '',
                    bank_branch_name: ''
                };
            },
            deleteBank (id) {
                let _this = this;
                Util.ajax.post(`/adminapi/bank/del`, {id: id}).then(response => {
                    if(response.data.code==0) {
                        _this.$Message.success('删除成功');
                        this.getList();
                    }else {
                        this.$Message.error(response.data.msg);
                    }
                }).catch( function (error) {
                    _this.$Message.error('网络请求失败');
                });
            }
        }
    };
</script>
<style>
    .show {color: red;font-style: normal;}
</style>
